<template>
  <div class="app-table">
    <el-table :data="pageData.items"
      ref="myTable"
      v-loading="loading"
      element-loading-text="拼命加载中"
      :header-cell-style="{background: 'rgba(121,211,238,1)', color: '#fff'}"
      :cell-style="{color:'#fff'}"
      :row-style="{background: 'rgba(121,211,238,0)'}">
      <el-table-column v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :formatter="item.formatter"
        :filters="item.filters"
        :class-name="item.className"
        :show-overflow-tooltip="true">
      </el-table-column>
    </el-table>
    <el-pagination class="min-pagination" background
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="!pageData.limit ? 10 : pageData.limit"
      layout="total, prev, pager, next, jumper"
      :total="pageData.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableColumns: {
      type: Array
    },
    pageData: {
      type: Object,
      default: function () {
        return {
          limit: 10,
          offset: 0,
          items: []
        }
      }
    }
  },
  data () {
    return {
      currentPage: 1,
      tableHeight: undefined,
      name: '',
      loading: false
    }
  },
  mounted () {
    this.name = this.$route.name
    this.loading = true
  },
  methods: {
    handleCurrentChange (val) {
      this.$emit('currentChange', val)
      this.loading = true
    }
  },
  computed: {},
  watch: {
    pageData: {
      handler: function (newValue, oldValue) {
        if (newValue.offset === 0) {
          this.currentPage = 1
        }
        this.loading = false
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style scoped>
.el-table {
  margin-bottom: 20px;
}
.app-table >>> .el-table th>.cell {
  white-space: nowrap;
  /* font-weight: 500 */
}
.app-table >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
.app-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(144,147,153,.3);
  border-radius: 3px;
}
</style>
<style>
.min-pagination.el-pagination {
  margin-bottom: 15px;
  color: #fff;
}
.min-pagination.el-pagination .el-pagination__total {
  color: #fff;
}
.min-pagination.el-pagination .el-pagination__jump {
  color: #fff;
}
</style>
